<template>
  <div>
    <!-- <button @click="connect">连接服务器</button>
    <br /> -->
    <!-- <label>被控端名称: <input v-model="targetName" /></label> -->
    <!-- <button @click="startCall">连接对方</button> -->
    <h3>用户列表</h3>
    <div class="video-list">
      <!-- 这里没有用户需要做一个点击显示全屏效果 并且能切换用户  -->
      <div class="video-item" @click="showThis(index)">
        <div class="exam-info">
          <div class="name">张三</div>
          <div class="other-img"><img src="" alt=""></div>
        </div>
        <video 
          id="remoteVideo" 
          ref="remoteVideo" 
          autoplay 
          playsinline 
          class="video"
        ></video>
      </div>
      <div class="video-item">
        <div class="exam-info">
          <div class="name">李四</div>
          <div class="other-img"><img src="" alt=""></div>
        </div>
        <video 
          id="remoteVideo1" 
          ref="remoteVideo1" 
          autoplay 
          playsinline 
          class="video"
        ></video>
      </div>
      <div class="video-item">
        <div class="exam-info">
          <div class="name">王五</div>
          <div class="other-img"><img src="" alt=""></div>
        </div>
        <video 
          id="remoteVideo1" 
          ref="remoteVideo1" 
          autoplay 
          playsinline 
          class="video"
        ></video>
      </div>
      <div class="video-item">
        <div class="exam-info">
          <div class="name">麻子</div>
          <div class="other-img"><img src="" alt=""></div>
        </div>
        <video 
          id="remoteVideo1" 
          ref="remoteVideo1" 
          autoplay 
          playsinline 
          class="video"
        ></video>
      </div>
    </div>
    <!-- 单一显示某用户  -->
    <!-- <div class="show-big">
      <div class="exam-info">
        <div class="name">李四</div>
        <div class="other-img"><img src="" alt=""></div>
      </div>
      <video 
        id="remoteVideo" 
        ref="remoteVideo" 
        autoplay 
        playsinline 
        class="video"
      ></video>
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted} from 'vue';

const myName = ref('monitor');  //当前用户id
const targetName = ref('11');
const remoteVideo = ref(null);
let ws = null;
let pc = null;

const connect = () => {
  const name = myName.value.trim();
  if (!name) return alert("请输入名称");

  ws = new WebSocket(`ws://10.10.0.80:10102/ws?name=${name}`);
  
  ws.onmessage = async (msg) => {
    const data = JSON.parse(msg.data);
    if (data.type === 'answer') {
      await pc.setRemoteDescription(new RTCSessionDescription(data.payload));
    } else if (data.type === 'candidate') {
      if (data.payload) {
        await pc.addIceCandidate(new RTCIceCandidate(data.payload));
      }
    }
  };
};

const startCall = async () => {
  const target = targetName.value.trim();
  if (!target) return alert("请输入对方名称");

  pc = new RTCPeerConnection();
  // 明确要求接收视频
  pc.addTransceiver('video', { direction: 'recvonly' });

  pc.onicecandidate = event => {
    if (event.candidate) {
      ws.send(JSON.stringify({
        type: 'candidate',
        from: myName.value,
        to: target,
        payload: event.candidate
      }));
    }
  };

  pc.ontrack = event => {
    console.log("event.streams[0]",event.streams[0]);
    
    if (remoteVideo.value.srcObject !== event.streams[0]) {
      remoteVideo.value.srcObject = event.streams[0];
      // 确保视频播放
      remoteVideo.value.play().then(e =>{
        console.log('视频播放成功',e);
      }).catch(e => {
        console.error('自动播放失败:', e);
        // 可以添加用户点击播放的后备方案
      });
    }
  };

  const offer = await pc.createOffer();
  await pc.setLocalDescription(offer);

  ws.send(JSON.stringify({
    type: 'offer',
    from: myName.value,
    to: target,
    payload: offer
  }));
};
onMounted(async() => {
  await connect();
  await startCall();
});
</script>

<style scoped>
/* 可以添加一些样式 */
button {
  margin: 5px;
  padding: 5px 10px;
}
input {
  margin: 5px;
  padding: 5px;
}
.video-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  .video-item{
    width: calc(25% - 10px);
    padding-bottom: 14%;
    /* height: auto; */
    position: relative;
    border-radius: 3px;
    border: 1px solid #ccc;
    .video{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      border-radius: 3px;
    }
    .exam-info{
      position: absolute;
      left: 0;
      bottom: 0;
      /* height: 50px; */
      width: 100%;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
      padding: 5px 10px;
      box-sizing: border-box;
      z-index: 2;
      .name{
        color: white;
      }
      .other-img{
        position: absolute;
        right: 10px;
        bottom: 5px;
        width: 40%;
        height: 60px;
        background: rgba(255,255,255, 0.5);
        z-index: 2;
      }
    }
  }
}
.show-big{
  
}
</style>